<template>
  <div id="comment-info" v-if="Object.keys(commentInfo).length !== 0">
    <div class="info-header">
      <span class="header-title">用户评论</span>
      <span class="header-more">更多</span>
    </div>
    <div class="info-bottom">
      <div class="info-user">
        <img :src="commentInfo.user.avatar" alt="">
        <span class="user-name">{{commentInfo.user.uname}}</span>
      </div>
      <div class="info-content">{{commentInfo.content}}</div>
      <div class="info-other">
        <span>{{showDate}}</span>
        <span class="other-style">{{commentInfo.style}}</span>
        <div class="info-imgs">
          <img :src="item" v-for="(item, index) in commentInfo.images" :key="index" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {formatDate} from "components/common/utilis";
  export default {
    name: "DetailCommentInfo",
    props:{
      commentInfo:{
        type:Object,
        default (){
          return {}
        }
      }
    },
    computed:{
      showDate(){
        //1.将时间戳转成Date对象
        const date = new Date(this.commentInfo.created * 1000)
        //2.将date进行格式化
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      }
    }
  }
</script>

<style scoped>
  #comment-info{
    padding: 5px 12px;
    border-bottom: 5px solid #f2f5f8;
  }
  .info-header{
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid rgba(0,0,0,.1);
    font-size: 15px;
  }
  .info-header .header-title{
    color: #50b7c1;
    float: left;
  }
  .info-header .header-more{
    float: right;
  }
  .info-user{
    padding: 13px 0;
    display: flex;
    align-items: center;
  }
  .info-user img{
    width: 42px;
    height: 42px;
    border-radius: 50%;
  }
  .info-user .user-name{
    margin-left: 20px;
    font-size: 14px;
    color: #222;
  }
  .info-content{
    font-size: 14px;
    margin-bottom: 10px;
  }
  .info-other{
    font-size: 12px;
  }
  .info-imgs{
    margin-top: 10px;
  }
  .info-imgs img{
    width: 72px;
    height: 72px;
    margin-left: 5px;
  }
  .info-other .other-style{
    margin-left: 10px;
  }

</style>